<template>
  <div>
    <el-dialog
      :title="dataForm.type == 1? '每日任务' : '成长任务'"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="visible"
      width="80%">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-button type="primary" @click="addOrUpdateHandle(0,dataForm.type)">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        style="width: 100%;">
        <el-table-column
          label="序号"
          type="index"
          width="50"
          align="center">
        </el-table-column>
        <el-table-column
          prop="taskType"
          header-align="center"
          align="center"
          label="任务类型">
              <template slot-scope="scope">
            <label v-if="scope.row.taskType === 1">商学院阅读</label>
            <label v-if="scope.row.taskType === 2">评介订单</label>
            <label v-if="scope.row.taskType === 3">浏览新品上架商品</label>
            <label v-if="scope.row.taskType === 4">浏览今日必买商品</label>
            <label v-if="scope.row.taskType === 5">每日分享</label>
            <label v-if="scope.row.taskType === 6">设置头像</label>
            <label v-if="scope.row.taskType === 7">设置昵称</label>
            <label v-if="scope.row.taskType === 8">浏览新人教程</label>
            <label v-if="scope.row.taskType === 9">意见反馈</label>
            <label v-if="scope.row.taskType === 10">绑定微信公众号</label>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          header-align="center"
          align="center"
          label="ID"
          v-if="show">
        </el-table-column>
        <el-table-column
          prop="taskDescription"
          header-align="center"
          align="center"
          label="任务描述">
        </el-table-column>
        <el-table-column
          prop="rewardDescription"
          header-align="center"
          align="center"
          label="奖励描述">
        </el-table-column>
        <el-table-column
          prop="rewardNumber"
          header-align="center"
          align="center"
          label="奖励积分数量">
        </el-table-column>
        <el-table-column
          prop="browseTaskTime"
          header-align="center"
          align="center"
          label="浏览时间"
          width="110">
        </el-table-column>
        <el-table-column
          prop=""
          header-align="center"
          align="center"
          label="图标">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              title=""
              trigger="hover">
              <img :src="'http://image.yilianbaihui.cn/consumer/' + scope.row.taskPath  + '/' + scope.row.taskImg" style="width: 530px; height: 530px"/>
              <img slot="reference" :src="'http://image.yilianbaihui.cn/consumer/' + scope.row.taskPath  + '/'  + scope.row.taskImg" :alt="'http://image.yilianbaihui.cn/consumer/' + scope.row.taskPath  + '/' + scope.row.taskImg" style="max-height: 50px;max-width: 130px">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          prop="enableState"
          header-align="center"
          align="center"
          label="启用">
          <template slot-scope="scope">
            <el-switch
              style="margin-left: 10px;margin-bottom: 5px;"
              v-model="scope.row.enableState"
              :active-value= 1
              :inactive-value= 0
              @change="enableChange(dataList[scope.$index].id, scope.row.enableState)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="220%"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id,dataForm.type,1)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button @click="visible = false">确定</el-button>
      </span>
    </el-dialog>
    <add-or-update-tasks v-if="addOrUpdateVisible" ref="addOrUpdateTasks" @refreshGetDataList="init"/>
  </div>
</template>

<script>
  import AddOrUpdateTasks from './addorupdate-dailytasks'
  export default {
    data () {
      return {
        show: false,
        addOrUpdateVisible: false,
        dataListSelections: '',
        selectionChangeHandle: '',
        dataListLoading: false,
        visible: false,
        dataList: [],
        pageIndex: 1,
        pageSize: 16,
        totalPage: 0,
        dataForm: {
          type: ''
        }
      }
    },
    components: {
      AddOrUpdateTasks
    },
    methods: {
      init (type) {
        debugger
        console.log(type)
        this.pageIndex = 1
        this.pageSize = 16
        this.dataForm.type = (type === undefined ? this.dataForm.type : type)
        this.getDataList(this.dataForm.type)
      },
      getDataList (type) {
        debugger
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/task/queryDailyTasksList'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pagesize,
            'type': type
          })
        }).then(({data}) => {
          debugger
          console.log(data)
          if (data && data.code === 0) {
            this.dataList = data.data.list
            this.totalPage = data.data.totalCount
          } else {
            return null
          }
          this.visible = true
          this.dataListLoading = false
        })
        console.log(this.dataList)
      },
      // 改变启用状态
      enableChange (id, enableState) {
        this.$confirm(`确定对[id=${id}]进行[状态更新]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/task/modifyTaskEnableStateById`),
            method: 'post',
            data: this.$http.adornData({
              'id': id || undefined,
              'enableState': enableState ? 1 : 0
            }, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.init()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        this.getDataList(this.dataForm.type)
      },
      addOrUpdateHandle (id, type, index) {
        if (index !== 1) {
          if (this.dataList.length >= 5) {
            return this.$message.error('添加上限')
          }
        }
        debugger
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdateTasks.init(id, type)
        })
      },
      // 删除
      deleteHandle (id) {
        debugger
        console.log(id)
        this.$confirm(`确定对[id=${id}]进行'删除'操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl(`/task/removeDailyTasksById/${id}`),
            method: 'get',
            data: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList(this.dataForm.type)
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      }
    }
  }
</script>
<style>
</style>
